<template>
  <el-main>
  <el-form ref="form" :model="form" label-width="80px" inline>
    <el-form-item label="申请类型">
      <el-select v-model="form.jrProductType" placeholder="请选择">
        <el-option label="租房分期" value="1"></el-option>
        <el-option label="收房贷" value="2"></el-option>
        <el-option label="应收租约保理" value="3"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="申请状态">
      <el-select v-model="form.applyState" placeholder="请选择">
        <el-option label="待审核" value="1"></el-option>
        <el-option label="初审通过(待复审)" value="2"></el-option>
        <el-option label="初审不通过" value="3"></el-option>
        <el-option label="复审通过" value="4"></el-option>
        <el-option label="复审不通过" value="5"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="查询日期">
      <el-col :span="11">
        <el-date-picker type="date" v-model="form.startDate" style="width:120px" value-format="yyyy-MM-dd"></el-date-picker>
      </el-col>
      <el-col class="line" :span="2">{{"\xa0"}}至</el-col>
      <el-col :span="11">
        <el-date-picker type="date" v-model="form.endDate" style="width:120px" value-format="yyyy-MM-dd"></el-date-picker>
      </el-col>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
      <el-button @click="onEmpty">清空</el-button>
    </el-form-item>
  </el-form>
  <el-table
    border
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="applyOrderNo"
      label="申请合同号"
      width="200"
      align="center">
    </el-table-column>
    <el-table-column
      prop="loanMessage"
      label="贷款信息"
      width="180"
      align="center">
    </el-table-column>
    <el-table-column
      prop="jrProductType"
      label="申请类型"
      align="center">
      <template slot-scope="scope">
          <span v-if="scope.row.jrProductType==1">租房分期</span>
          <span v-if="scope.row.jrProductType==2">收房贷</span>
          <span v-if="scope.row.jrProductType==3">应收租约保理</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="loanAmount"
      label="借款金额"
      align="center">
      <template slot-scope="scope">
        <span>{{ scope.row.loanAmount }}元</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="monthLimit"
      label="借款期限"
      align="center">
      <template slot-scope="scope">
        <span>{{ scope.row.monthLimit }}个月</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="createTime"
      label="申请日期"
      align="center">
    </el-table-column>
    <el-table-column
      prop="companyName"
      label="资金方"
      align="center">
    </el-table-column>
    <el-table-column
      prop="applyState"
      label="申请状态"
      align="center">
      <template slot-scope="scope">
        <span v-if="scope.row.applyState==1">待审核</span>
        <span v-if="scope.row.applyState==2">初审通过(待复审)</span>
        <span v-if="scope.row.applyState==3">初审不通过</span>
        <span v-if="scope.row.applyState==4">复审通过</span>
        <span v-if="scope.row.applyState==5">复审不通过</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="auditMemo"
      label="驳回原因"
      align="center">
    </el-table-column>
  </el-table>
    <div class="block" align="center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.form.current"
        :page-sizes="[5,10]"
        :page-size="this.form.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </el-main>
</template>

<script>
import {getJrRentInstallmentList} from "@/api/banking/applicationsfor";
import {page} from "@/api/banking/applicationscheck/applicationscheck";
export default {
  data() {
    return {
      tableData: [],
      form: {
        current:1,
        size:10,
        jrProductType:'',
        applyState:'',
        startDate:'',
        endDate:'',
      },
      total:0,
    }
  },
  methods: {
    JrRentInstallmentList(){
      page(this.form).then(res=>{
         console.log(res);
         this.tableData = res.msgData.records;
         this.total = res.msgData.total;
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.form.size = val;
      this.form.current = 1;
      this.JrRentInstallmentList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.form.current = val;
      this.JrRentInstallmentList();
    },
    //清空
    onEmpty(){
       this.form = {
         current:1,
         size:10,
         jrProductType:'',
         applyState:'',
         startDate:'',
         endDate:'',
      }
    },
    //查询
    onSubmit(){
      console.log(this.form)
      this.JrRentInstallmentList();
    }
  },
  created() {
     this.JrRentInstallmentList();
  }
}
</script>

<style scoped>

</style>
